﻿<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>新版迅雷影音官网jQuery焦点图代码</title>
<link rel="stylesheet" href="css/css.css">
<style>
	html,body{overflow:hidden;}
</style>
</head>
<body>
<!--容器 wrapper-->
<div class="wrapper">
  <div id="content" class="content">
  <!--左右箭头-->
   <div class="s_arr"><a  class="s_left png"></a> <a  class="s_right png"></a></div>
    <div id="color_list" class="bg_colors">
      <div class="bgs_box bgs_1">
        <!--wp是图片右侧包含文字的div-->
        <div class="wp">
          <!--img_area是包含图片的div-->
          <div class="img_area">
            <div class="shadow png">
              <div class="s_img"></div>
            </div>
          </div>
        </div>
        <!--footer是图片底部跟随背景颜色而改变颜色的div-->
        <div class="footer">
        </div>
      </div>
      <div class="bgs_box bgs_2">
        <div class="wp">
          <div class="img_area">
            <div class="shadow png">
              <div class="s_img"></div>
            </div>
          </div>
        </div>
        <div class="footer">
        </div>
      </div>
      <div class="bgs_box bgs_3">
        <div class="wp">
          <div class="img_area">
            <div class="shadow png">
              <div class="s_img"></div>
            </div>
            <div class="shadow01 png">
              <div class="s_img01"></div>
            </div>
          </div>
        </div>
        <div class="footer">
        </div>
      </div>
    </div>
    <div class="main">
      <div id="txt_list" class="item_txt_box">
        <div class="item_txt item_txt_1">
          <div class="txt_info png"> <strong class="hd">迅雷影音5.1</strong>
            <h2 class="hd">精彩视界 乐无止境</h2>
            <p class="hd">迅雷看看华丽升级版，重磅来袭！</p>
          </div>
          <div class="detail">
            <ul id="v_info">
            </ul>
            <a href="" class="download_btn png">立即下载</a>
            <p>想找旧版迅雷看看？ <a href="#" target="_blank" class="chk_link">点击查看 ></a></p>
          </div>
        </div>
        <!--*******************-->
        <div class="item_txt item_txt_2">
          <div class="txt_info png">
            <h2 class="hd">全新片库 为您而来</h2>
            <p class="hd">海量资源，新鲜资讯，想看就看；<br/>
              视频类型清晰分类，剧集更新实时提醒。 </p>
          </div>
          <div class="detail other">
          </div>
        </div>
        <!--*******************-->
        <div class="item_txt item_txt_3">
          <div class="txt_info png">
            <h2 class="hd">专业播放  尽享精彩</h2>
            <p class="hd">百种格式，高清视频，一点就播；<br/>
              看片搜片窗口分离，播放记录云端同步。 </p>
          </div>
          <div class="detail other">
          </div>
        </div>
      </div>
    </div>
    <!--switch_box是图片底部三个指示灯-->
      <div id="switch_box" class="switch_list"> <span class="on"></span> <span class=""></span> <span class=""></span> </div>
  </div>
</div>

<!--[if IE 6]><script type="text/javascript" src="js/ie6png.js"></script><![endif]-->
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
(function($){
  //定义高度为浏览器的高度减60，然后分别找到容器，放置文本的div，和指示灯 
    var initHeight = $(window).height() - 60,
        $colorList = $('#color_list').find('.bgs_box'),
        $txtList = $('#txt_list').find('.item_txt'),
        $switchList = $('#switch_box').find('span'),
        timer = null,
        key = 1;
	
    //IE6 bug
    $switchList.eq(0).addClass('on');
    $txtList.eq(0).addClass('on');
    $colorList.eq(0).addClass('on');

    //高度调整
    $('#content').css('min-height',initHeight + 'px')
    //视窗变化时
    $(window).resize(function(){
        initHeight = $(window).height() - 60;
        $('#content').css('min-height',initHeight + 'px');
        if($(window).height() > 866){
            $('#ft_area').addClass('pst_ft');
        }else{
           $('#ft_area').removeClass('pst_ft'); 
        }
    })
	loadFinish();
    $('#switch_box').on('click','span',function(){
        var stepIndex = $switchList.index($(this));
        actFn(stepIndex);
    }).hover(function(){
        clearInterval(timer);
    },function(){
        timer = setInterval(function(){
            actFn(key);
        },2000)
    })
//左右箭头绑定点击事件  
    $('.s_arr').on('click','a',function(){
      //step为对应的每张图片的索引值 
        var step = $('.s_arr').find('a').index($(this));
		$('#switch_box').find('span').each(function(i){
   			var css=$(this).hasClass("on");
			if(css){
        //当切换到第一张图片时，点击左箭头切换到最后一张 
				if(step==0){
					if(i==0){
						step=2	
					}else{
						step=i-1;
					}
				}else{
        //当切换到最后一张图片时，点击右箭头切换到第一张  
					if(i==2){
						step=0;	
					}else{
						step=i+1;
					}
				}	
			}
 		});
        actFn(step);
    }).hover(function(){
        clearInterval(timer);
    },function(){
        timer = setInterval(function(){
            actFn(key);
        },7000)
    })
    //底部位置调整
    if($(window).height() > 866){
        $('#ft_area').addClass('pst_ft');
    }else{
       $('#ft_area').removeClass('pst_ft'); 
    }
    //轮播
    function actFn(stepIndex){
        var stepIndex = stepIndex;
        $switchList.eq(stepIndex).addClass('on').siblings().removeClass('on');
        $colorList.stop().eq(stepIndex).animate({opacity:1},800).css({flter:"Alpha(Opacity=100)"}).siblings().animate({opacity:0},800);
        $txtList.eq(stepIndex).addClass('on').siblings().removeClass('on');
        key = stepIndex;
        $('.bgs_box').eq(key).find(".img_area").addClass('item_img_css3');
        $('.bgs_box').eq(key).siblings().find(".img_area").removeClass('item_img_css3');
        $('.bgs_box').eq(key).find(".footer").fadeIn(800);
        $('.bgs_box').eq(key).siblings().find(".footer").fadeOut(800);
        $(".item_txt").eq(key).addClass('item_txt_css3').siblings().removeClass('item_txt_css3');
        key++;
        if(key == $txtList.length){
            key = 0;
        }
    }
	//预加载banner动画背景图
	function preloadImages(){
		var arrImage = [];
		var parLen = arguments.length;
  	var cur = 0;
		for (var i = 0; i < parLen; i++) {
			arrImage[i] = new Image();
			arrImage[i].onload = function(){
				if(cur == parLen -1){
					loadFinish();	
				}
				cur++;
			};
			arrImage[i].src = arguments[i];
		}
	}
	function loadFinish(){
        $txtList.eq(0).addClass('item_txt_css3');
        $colorList.eq(0).find(".img_area").addClass('item_img_css3');
        //自动轮播
        timer = setInterval(function(){
            actFn(key);
        },7000);
	}
})(jQuery)
</script>

<!--[if IE 6]>
<script type="text/javascript">
    (function($){
        var initHeight = $(window).height() - 60;
        $('#content').css('height',initHeight + 'px');
        $('#content').css('overflow',"hidden");
        $(window).resize(function(){
            initHeight = $(window).height() - 60;
            $('#content').css('height',initHeight + 'px');
            $('#content').css('overflow',"hidden");
        })
    })(jQuery)
</script>
<![endif]-->

</body>
</html>
<!--jquery特效网址：http://woofeng.cn/codes/ 免费下载-->